<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <link href="/static/layui/css/layui.css" rel="stylesheet" type="text/css">
</head>
<div style="padding:10px 50px 10px 10px">
    <form id="recordForm" method="post" action="/pc/biz/record/edit" class="layui-form">
        <div style="margin-bottom:20px;font-size:14px;border-bottom:1px solid #ccc; padding-bottom: 5px;">订单信息</div>
        <input type="hidden" name="id" value="${record.id}"/>
        <div class="layui-form-item">
            <label class="layui-form-label">实验室</label>
            <div class="layui-input-block">
                <select id="area" name="area" lay-verify="required"  lay-filter="areaSelect">
                    <option value=""></option>
                    @@ for(area in areas){ $$
                    <option value="${area.id}" ${record.area == area.id ? "selected" : ""}>${area.name}</option>
                    @@ } $$
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">房间</label>
            <div class="layui-input-block">
                <input class="layui-input" name="room" value="${record.room}" lay-verify="required"/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">设备编号</label>
            <div class="layui-input-block">
                <input class="layui-input" type="text" name="equipmentId" value="${record.equipmentId}"
                       lay-verify="required"/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">设备名称</label>
            <div class="layui-input-block">
                <input class="layui-input" type="text" name="equipmentName" value="${record.equipmentName}"/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">登记人</label>
            <div class="layui-input-block">
                <input class="layui-input" type="text" name="registrantName" value="${record.registrantName}"
                       lay-verify="required"/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">学号、工号</label>
            <div class="layui-input-block">
                <input class="layui-input" type="text" name="registrantNumber" value="${record.registrantNumber}"/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">报修角色类型</label>
            <div class="layui-input-block">
                <select name="registrantType" lay-verify="required">
                    <option value=""></option>
                    <option value="学生">学生</option>
                    <option value="教工">教工</option>
                    <option value="技术员">技术员</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">故障类型</label>
            <div class="layui-input-block">
                <select name="classify" id="classify">
                    <option value=""></option>

                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">故障详情</label>
            <div class="layui-input-block">
                <textarea class="layui-textarea" id="detail" name="detail" placeholder="">${record.detail}</textarea>
            </div>
        </div>
        <div class="layui-form-item" id="uploader" data-old-file-url="${url!}">
            <label class="layui-form-label">图片</label>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button id="submitButton" class="layui-btn" lay-submit lay-filter="*">保存</button>
                <button type="button" class="layui-btn layui-btn-primary" onclick="closeAll()">取消</button>
            </div>
        </div>
    </form>
</div>
<script src="/static/jquery/jquery.min.js"></script>
<script src="/static/layui/layui.js"></script>
<script src="/static/jqgrid/jquery.jqGrid.minffe4.js?0820"></script>
<script src="/static/jqgrid/myjqGrid.js?v=1.0.1"></script>
@@ include("../../upload.jsp"){} $$
<script type="text/javascript">
    layui.use(['layer', 'form'], function () {
        var form = layui.form ,form = layui.form;
        form.on('submit(*)', function (data) {
            var recordId = '${record.id}';
            var form = $("#recordForm");
            var formData = form.serialize();
            formData.detail = $("#detail").html();
            $.post(form.attr("action"), formData, function (data) {
                if (data.status == 200) {
                    layer.alert(data.msg, {
                        icon: 1,
                        skin: 'layer-ext-moon'
                    }, function () {
                        parent.myJqGrid.reloadGrid({});
                        parent.layer.closeAll();
                    });
                } else {
                    layer.alert(data.msg, {
                        icon: 2,
                        skin: 'layer-ext-moon'
                    });
                }
            });
            return false; //阻止表单跳转。
        });
        form.on('select(areaSelect)', function(data){
            var areaId=data.value;
            $.ajax({
                type: 'POST',
                url: '/pc/biz/record/editClassify',
                data: {areaId:areaId},
                dataType:  'json',
                success: function(data){
                    $("#classify").html("");
                    $.each(data, function(key, val) {
                        var option1 = $("<option>").val(key).text(val);
                        $("#classify").append(option1);
                        form.render('select');
                    });
                    $("#classify").get(0).selectedIndex=0;
                }
            });
        });
    });

    function closeAll() {
        parent.layer.closeAll();
    }

    $(function () {

        $('#uploader').myFileUpload({
            type: 'image',
            ctxPath: "${ctxPath!}",
            reqUrl: '${ctxPath!}/img/upload',
            hiddenInputName: 'url',
            urlPrefix: '/upload/ueditor/image/',
            urlPreviewPrefix: '${ctxPath!}/upload/ueditor/image/'
        });
    });
</script>